<template>
    <div class="About">
      <p>大家好，我是<b>{{ name }},</b></p>
      <p>今年<b>{{ age }}</b>岁。</p>
      <input type="text" v-model="title"/>
      <child-component :cmessage="title"></child-component>
      <p>{{ count }}</p>
      <button @click="increment">Increment</button>
      <button @click="incrementAsync">IncrementAsync</button>
      <br>
      <input v-model="account" placeholder="Account" />
      <input v-model="password" type="password" placeholder="Password" />
      <button @click="login">Login</button>
    </div>
</template>

<script>
import Child from './Child.vue';
  export default {
      data(){
        return{
          name:"王老师",
          age:30+2,
          title:'114',
          account: '', // 添加 account
          password: ''
        }
      },
      components: {
      'child-component': Child // 注册子组件
      },
      computed: {
        count() {
          return this.$store.state.count;
        }
      },
      methods: {
        increment() {
          this.$store.commit('increment');
        },
        incrementAsync(){
          this.$store.dispatch('incrementAsync');
        },
        async login() {
          const success = await this.$store.dispatch('login', { account: this.account, password: this.password });
          if (success) {
            console.log('Login successful:', this.account, this.password);
            this.$router.push('/');
          } else {
              console.log('Login failed', this.account, this.password);
              // 可以显示错误消息或采取其他措施
              alert('Login failed: Invalid account or password');
            }
        }
    }
  }
</script>